<template>
    <div class="app">
        <van-row class="search">
            <van-search v-model="key" placeholder="请输入搜索关键词" class="searchCol" />
            <div class="price searchCol">
                价格范围
                <input v-model="start" /> 到 <input v-model="end" />
            </div>
            <van-dropdown-menu class="searchCol">
                <van-dropdown-item v-model="sort" :options="option1" />
                <van-dropdown-item v-model="order" :options="option2" />
            </van-dropdown-menu>
        </van-row>
    
        <div class="container">
            <div class="sider">
                <van-sidebar v-model="classifySideIndex">
                    <van-sidebar-item title="女装" />
                    <van-sidebar-item title="男装" />
                    <van-sidebar-item title="男鞋" />
                    <van-sidebar-item title="女鞋" />
                    <van-sidebar-item title="母婴类目" />
                    <van-sidebar-item title="童装" />
                </van-sidebar>
            </div>
    
            <van-pull-refresh v-model="refreshing" @refresh="onRefresh" class="goodslist">
                <van-list v-model="loading" :finished="finished" :immediate-check="check" finish-text="没有更多了" @load="onLoad">
                    <div class="goods" v-for="item in goodslist" :key="item.id" @click="gotoDetail(item.id)">
                        <van-card :num="item.goodsnum" :price="item.goodsprice" :title="item.goodsname" :thumb="item.img">
                        </van-card>
                    </div>
                </van-list>
            </van-pull-refresh>
        </div>
    
    
    </div>
</template>

<script>
import { goodsQuery } from "@/model/goodsModel";
export default {
    mounted() {
        const type = Number(this.$route.params.type);
        this.classifySideIndex = type - 1;
        this.search();
    },
    data() {
        return {
            key: "", //搜索的关键字
            type: "", //类别
            start: "", //开始
            end: "", //结束
            loading: false, //表示刷新的请求状态
            finished: false, //表示是否全部加载完成
            check: false, //是否第一次检查加载到底部
            refreshing: false, //刷新状态
            sort: "id",
            order: "asc",
            option1: [
                { text: "编号", value: "id" },
                { text: "价格", value: "price" },
            ],
            option2: [
                { text: "升序", value: "asc" },
                { text: "降序", value: "desc" },
            ],
            classifySideIndex: 0,
            page: 1, //表示第一页
            limit: 6, //每页显示三条
            goodslist: [], //每页显示的数据
            total: 100, //数据总数
        };
    },
    watch: {
        sort() {
            this.page = 1;
            this.goodslist = [];
            this.finished = false;
            this.search();
        },
        order() {
            this.page = 1;
            this.goodslist = [];
            this.finished = false;
            this.search();
        },
        start() {
            this.page = 1;
            this.goodslist = [];
            this.finished = false;
            this.search();
        },
        end() {
            this.page = 1;
            this.goodslist = [];
            this.finished = false;
            this.search();
        },
        key() {
            this.page = 1;
            this.goodslist = [];
            this.finished = false;
            this.search();
        },
        classifySideIndex(index) {
            this.page = 1;
            this.goodslist = [];
            this.finished = false;
            this.type = index + 1;
            this.search();
        },
    },
    methods: {
        onRefresh() {
            this.refreshing = false;
            this.finished = false;
            this.page = 1;
            this.goodslist = [];
            this.search();
        },
        onLoad() {
            console.log("碰到底部")
            //碰到底部
            this.page++;
            this.search();
        },
        gotoDetail(id) {
            this.$router.push("/detail/" + id);
        },
        async search() {
            let params = {
                _page: this.page,
                _limit: this.limit,
                _sort: this.sort,
                _order: this.order,
                type: 1, // 默认类型1
                goodsname_like: this.key, //lte小于等于  gte是大于等于
            };
            if (this.start) {
                params.goodsprice_gte = this.start * 1;
            }
            if (this.end) {
                params.goodsprice_lte = this.end * 1;
            }
            if (this.type) {
                //动态参数
                params.type = this.type;
            }
            let res = await goodsQuery(params);
            let params2 = {
                //请求所有数据得到数据总数
                goodsname_like: this.key,
            };
            if (this.start) {
                params2.goodsprice_gte = this.start * 1;
            }
            if (this.end) {
                params2.goodsprice_lte = this.end * 1;
            }
            if (this.type) {
                params2.type = this.type;
            }
            let res2 = await goodsQuery(params2);
            this.goodslist = [...this.goodslist, ...res.data];
            this.total = res2.data.length;
            this.loading = false;
            if (this.goodslist.length >= this.total) {
                this.finished = true;
            }
        }
    }
};
</script>


<style lang="scss" scoped>
.app {
    font-size: 14px;
    position: relative;
}

.search {
    width: 100%;
    z-index: 10;
    position: fixed;
    top: 0;
    background-color: #fff;
}

.searchCol {
    box-sizing: border-box;
    margin: 10px 12px;
}

.price {
    input {
        width: 3rem;
    }
}

.container {
    margin-top: 4.2rem;
}

.sider {
    position: fixed;
    top: 4.2rem;
    left: 0;
}

.goodslist {
    margin-bottom: 2rem;
    margin-left: 2.2rem;
}
</style>